<template>
  <div class="index-setting-root">
    <el-button type="primary" :icon="Setting" circle/>
    <el-switch inline-prompt size="large" v-model="isDark" :active-icon="Moon" :inactive-icon="Sunny" />
  </div>

</template>

<script setup lang="ts">
import { useDark } from '@vueuse/core';
import { Sunny, Moon, Setting } from '@element-plus/icons-vue'

const isDark = useDark();
</script>

<style scoped lang="scss">
.index-setting-root {
  @include flex(row, space-between, center);
  @include box(100%, 50px);
  padding: 10px;
}
</style>